<template>
    <div>
        <!-- <pre>{{list}}</pre> -->
       <!-- <div> -->
            <dl  v-for="(v,i) in list.list" :key="i" @click="sub(v.id)">
            <dt>
                <img :src="v.img" alt="">
            </dt>
            <dd>
                <p>{{v.title}}</p>
                <p>{{v.num}}</p>
            </dd>
        </dl>
       <!-- </div> -->
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import {State,Action} from 'vuex-class';
import {mapActions} from 'vuex'
@Component({
    ...mapActions(['SET_DETAIL']),
    methods:{
        sub(id){
            this.$router.push({name:"Detail",params:id})
            this.$store.commit('SET_DETAIL',id)
        }
    }
})
export default class List extends Vue {
    @State('list') list?:[]
    @Action('GET_LIST') getList:any
    created(){
        this.getList()
    }
}
</script>

<style lang="scss" scoped>
  dl{
      width: 100%;
      height: 120px;
      display: flex;
      align-items: center;
  }
</style>